<template>
  <div class="in-newbox">
    <!-- 顶部标题 -->
    <div v-if="(init.thumbnails.image.length > 1)" class="newbox-top">
      <h2>{{ init.title }}</h2>
      <span>{{ init.newsTime }}</span>
    </div>

    <div
      class="newbox-inset"
      :style="
        'background:url(' +
        init.thumbnail +
        ') no-repeat;background-size: cover'
      "
    >
      <!-- 图片 -->
      <div
        class="newbox-img"
        @mouseenter="elshow = false"
        @mouseleave="elshow = true"
      >
        <transition name="el-fade-in" v-if="init.type === 'video'">
          <div class="img-cover" v-show="elshow">
            <i class="el-icon-video-play"></i>
          </div>
        </transition>

        <img
          v-for="item in init.thumbnails.image"
          :src="item.url"
          :key="item.url"
          alt=""
        />
      </div>
      <!-- 侧面标题 -->
      <div v-if="!(init.thumbnails.image.length > 1)" class="newbox-text">
        <h2 class="newbox-title">{{ init.title }}</h2>
        <div class="newbox-info">
          <span class="newbox-name">{{ init.catename }}</span>
          <span class="newbox-time">{{ init.newsTime }}</span>
        </div>
        <div class="news-tag">
          <el-tag v-if="init.type === 'article'" size="small">
            {{ init.type }}
          </el-tag>
          <el-tag v-else-if="init.type === 'video'" type="success" size="small">
            {{ init.type }}
          </el-tag>
          <el-tag v-else-if="init.type === 'short'" type="warning" size="small">
            {{ init.type }}
          </el-tag>
          <el-tag v-else type="info" size="small">{{ init.type }}</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    news: {
      default: null,
      type: Object,
    },
  },
  watch: {
    news: {
      handler(val) {
        this.init = val
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      init: null,
      elshow: true,
    }
  },
  methods: {
    created() {
      this.init = this.news
      //   图片个数大于1，顶部标题显示，右侧隐藏
    },
  },
}
</script>

<style lang="less" scoped>
.in-newbox {
  margin-top: 25px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  .newbox-top {
    overflow: hidden;
    margin-bottom: 5px;
    line-height: 30px;
    h2 {
      float: left;
    }
    span {
      float: right;
    }
  }
  .newbox-inset {
    display: flex;
    position: relative;
    //   margin-bottom: 10px;
    margin-bottom: 25px;
    height: 180px;
    width: 100%;
    background-size: cover;
    &::before {
      z-index: 0;
      opacity: 0.77;
      content: '';
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background-color: rgb(255, 255, 255);
    }
    .newbox-img {
      z-index: 1;
      display: flex;
      position: relative;
      .img-cover {
        z-index: 1;
        content: '';
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        height: 100%;
        width: 320px;
        background-color: #2a2a2a35;
        color: white;
        i {
          font-size: 55px;
        }
      }
      img {
        position: relative;
        margin-right: 10px;
      }
    }
    .newbox-text {
      z-index: 1;
      position: relative;
      margin-left: 10px;
      padding: 20px 0;
      width: 100%;
      .newbox-info {
        margin-top: 5px;
        overflow: hidden;
        span {
          line-height: 20px;
        }
        .newbox-name {
          float: left;
        }
        .newbox-time {
          float: right;
        }
      }
      .news-tag {
        position: absolute;
        bottom: 20px;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
